<template>
  <div :class="['error-page', $route.query.error]">
    <div class="container">
      <div class="face" v-show="$route.query.error === 'face-error'">
        <img src="@/assets/images/error-face-text.png" alt="" class="error-face-text"/>
        <img src="@/assets/images/error-face-btn.png" alt="" class="error-face-btn scale-on-active" @click="$router.replace({name: $route.query.from})"/>
      </div>
      <div class="yuan" v-show="$route.query.error === 'yuan-error'">
        <img src="@/assets/images/error-yuan-text.png" alt="" class="error-yuan-text"/>
        <img src="@/assets/images/error-yuan-btn.png" alt="" class="error-yuan-btn scale-on-active" @click="$router.replace({name: $route.query.from})"/>
      </div>
      <div class="network" v-show="$route.query.error === 'network-error'">
        <img src="@/assets/images/error-network-text.png" alt="" class="error-network-text"/>
        <img src="@/assets/images/error-network-btn.png" alt="" class="error-network-btn scale-on-active" @click="$router.replace({name: $route.query.from})"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'errorPage',
  created () {
    let errorMap = {
      'face-error': '出现非人脸弹窗提示',
      'network-error': '出现网络罢工提示',
      'yuan-error': '出现服务器故障提示'
    }
    window._hmt.push(['_trackEvent', '错误提示', 'view', errorMap[this.$route.query.error]])
  }
}
</script>

<style lang="scss">
  .error-page {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: {
      image: url(~@/assets/images/error-bg.png);
      size: cover;
      position: center;
    }
    .container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .face {
      .error-face-text {
        width: 451px;
        height: 508px;
      }
      .error-face-btn {
        width: 317px;
        height: 115px;
        margin-top: 130px;
      }
    }
    .yuan {
      .error-yuan-text {
        width: 451px;
        height: 435px;
      }
      .error-yuan-btn {
        width: 317px;
        height: 115px;
        position: absolute;
        top: 293px;
        left: 71px;
      }
    }
    .network {
      .error-network-text {
        width: 451px;
        height: 435px;
      }
      .error-network-btn {
        width: 317px;
        height: 115px;
        position: absolute;
        top: 293px;
        left: 71px;
      }
    }
  }
</style>
